<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import ReDialog from '@/components/ReDialog/index.vue'
import { FormRules } from 'element-plus'
import { _addUser, _updateUser } from '@/api/user'
import { Message } from '@/utils/message'

const emit = defineEmits(['afterSuccess'])

const dialogVisible = ref(false)
const title = ref('新增用户信息')
const formRef = ref()
const formState = ref({
  id: undefined,
  name: '',
  nickname: '',
  phone: '',
  description: ''
})
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 2,
      max: 16,
      message: '用户名长度应在2到16个字符之间',
      trigger: 'blur'
    },
    {
      pattern: /^[a-zA-Z0-9]{2,16}$/,
      message: '用户名仅支持字母和数字',
      trigger: 'blur'
    }
  ],
  phone: [
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号',
      trigger: 'change'
    }
  ],
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    { min: 2, max: 24, message: '昵称长度应在2到24个字符之间', trigger: 'blur' }
  ]
})

const formatToDigits = (value: string): string => {
  return value.replace(/[^\d]/g, '')
}

const show = data => {
  if (data?.id) {
    title.value = '编辑用户信息'
    const { id, name, nickname, phone, description } = data
    nextTick(() => {
      formState.value = { id, name, nickname, phone, description }
    })
  } else {
    title.value = '新增用户信息'
  }
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
  formRef.value.clearValidate()
  formRef.value.resetFields()
}

const submit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      const params = {
        ...formState.value
      }
      const func = title.value === '新增用户信息' ? _addUser : _updateUser
      func(params)
        .then(res => {
          Message.success(res.message)
          emit('afterSuccess')
          handleClose()
        })
        .catch(err => {
          console.log(err)

          Message.error(err.message)
        })
    }
  })
}
defineExpose({
  show
})
</script>

<template>
  <ReDialog
    v-model="dialogVisible"
    :title="title"
    @before-close="handleClose"
    @submit="submit"
  >
    <el-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      label-position="right"
      label-width="80px"
    >
      <el-form-item prop="id" hidden />
      <el-form-item label="用户名" prop="name">
        <el-input
          v-model.trim="formState.name"
          :readonly="title === '编辑用户信息'"
          placeholder="请输入用户名"
          maxlength="16"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input
          v-model.trim="formState.nickname"
          maxlength="24"
          show-word-limit
          placeholder="请输入用户昵称"
          clearable
        />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model.trim="formState.phone"
          placeholder="请输入用户手机号"
          clearable
          maxlength="11"
          :formatter="formatToDigits"
        />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="formState.description"
          :rows="2"
          type="textarea"
          placeholder="请输入用户描述"
          maxlength="255"
          show-word-limit
          clearable
        />
      </el-form-item>
    </el-form>
  </ReDialog>
</template>
